<template>
  <Card>
    <Row type="flex" justify="space-between">
      <Col span="20">
        <DatePicker
          @on-change="dataChange"
          ref="datetime"
          type="datetime"
          placeholder="Select date"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="time"
          style="width: 200px"
        ></DatePicker>
      </Col>
      <Col span="2" align="right">
        <Button type="primary" @click="save">新增</Button>
      </Col>
    </Row>
    <Table
      stripe
      :columns="columns"
      :loading="contentLoading"
      :data="currentList"
      style="margin-top:15px"
    ></Table>
    <br>
    <Page
      :total="page.total"
      :current="page.current"
      :page-size="page.size"
      show-elevator
      show-sizer
      show-total
      :page-size-opts="[1, 2, 3, 4]"
      placement="top"
      @on-change="getData"
      @on-page-size-change="nowPageSize"
    ></Page>
  </Card>
</template>
<script>

import { userList } from '@/api/sys/user'
import { page_minins } from '@/utils/page_minins'

export default {
  mixins: [page_minins],
  data () {
    return {
      time: "2019-05-15 00:00:00",
      editIndex: -1,
      editName: '',
      editAge: '',
      editAddress: '',
      page: {
        id: 2,
        username: 1
      },
      ruleValidate: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bucketName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      columns: [
        {
          align: 'center',
          width: 50,
          type: 'selection',
        },
        {
          title: '序号',
          align: 'center',
          width: 70,
          type: 'index'
        },
        {
          title: '姓名',
          key: 'name',
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [h('Input', {
                props: {
                  value: row.name
                },
                on: {
                  input: (val) => {
                    this.editName = val
                  }
                }
              })]
            } else {
              edit = row.name
            }
            return h('div', [edit])
          }
        },
        {
          title: '年龄',
          key: 'age',
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [
                h('Input', {
                  props: {
                    value: row.age
                  },
                  on: {
                    input: (val) => {
                      this.editAge = val
                    }
                  }
                })
              ]
              /* h('Input', {
                props: {
                  value: row.age
                },
                on: {
                  input: (val) => {
                    this.editAge = val
                  }
                }
              }) */
            } else {
              edit = row.age
            }
            return h('div', [edit])
          }
        },
        {
          title: '地址',
          key: 'address',
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [h('Input', {
                props: {
                  value: row.address
                },
                on: {
                  input: (val) => {
                    this.editAddress = val
                  }
                }
              })]
            } else {
              edit = row.address
            }
            return h('div', [edit])
          }
        },
        {
          title: '操作',
          key: 'handle',
          width: 250,
          align: 'center',
          handle: ['edit', 'delete'],
          render: (h, { row, index }) => {
            if (index === this.editIndex) {
              return [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      let { editName, editAge, editAddress } = this.formItem
                      this.currentList[index].name = editName
                      this.currentList[index].age = editAge
                      this.currentList[index].address = editAddress
                      this.editIndex = -1
                    }
                  }
                }, '保存'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '10px'
                  },
                  on: {
                    click: () => {
                      this.editIndex = -1
                    }
                  }
                }, '取消')
              ]
            } else {
              return h('Button', {
                props: {
                  size: 'small'
                },
                on: {
                  click: () => {
                    let { name, age, address } = row
                    this.editName = name
                    this.editAge = age
                    this.editAddress = address
                    this.editIndex = index
                  }
                }
              }, '修改')
            }
          }
        }
      ]
    }
  },
  mounted () {
    this.pageList(userList)
  },
  methods: {
    dataChange (time) {
      this.time = time
    },
    save () {
      alert(this.time)
    }
  },
  watch: {
    'time': function (nVal) {
      console.log(nVal)
    }
  }
}
</script>
